<template>
    <div>
       <el-card class="box-card" style="width:60%;margin-left:300px;" shadow="0px 0px 0px 0px">
         <el-form ref="ruleForm"  :rules="rules" label-width="100px" class="demo-ruleForm" label-position="right">
            <el-form-item label="属性名称:" prop="name">
                <el-input value="屏幕尺寸"></el-input>
            </el-form-item>
        </el-form>
        <el-form ref="ruleForm" class="demo-ruleForm" label-position="right">
            <el-form-item label="商品类型:">
                 <el-select placeholder="手机数码-手机通讯"  v-model="value">
                    <el-option label="手机数码-手机通讯" value="手机数码-手机通讯"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-radio-group label="分类筛选样式:">
                <el-radio label="普通"></el-radio>
                <el-radio label="颜色"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-radio-group label="能否进行检索:">
                <el-radio label="不需要检索"></el-radio>
                <el-radio label="关键字检索"></el-radio>
                <el-radio label="范围检索"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="商品属性关联:" prop="resource">
                <el-radio-group>
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性是否可选:" prop="resource">
                <el-radio-group >
                <el-radio label="唯一"></el-radio>
                <el-radio label="单选"></el-radio>
                <el-radio label="复选"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值的录入方式:" prop="resource">
                <el-radio-group>
                <el-radio label="手工录入"></el-radio>
                <el-radio label="从下面列表中选择"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值可选列表:" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item> 
            <el-form-item label="能否支持手动新增" prop="resource">
                    <el-radio-group>
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                    </el-radio-group>
            </el-form-item>
            <el-form>
                <el-form-item label="排序属性:">
                    <el-input value="0"></el-input>
                </el-form-item>
            </el-form>
            <el-form-item>
                    <el-button type="primary">提交</el-button>
            </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    name:'editerAttribute',
    data() {
        return {
            ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
       onSubmit() {
        console.log('submit!');
      }
  },
};
</script>

<style scoped lang="less">

</style>